<template>
  <div class="app-container receipt-detail">
    <header class="detail-container">
      <div class="top-bar">
        <div class="top-bar-tag"></div>
        <div class="top-bar-title">审批详细</div>
      </div>
      <div class="detail-table">
        <table>
          <tr>
            <td>经办人：</td>
            <td>{{baoXiao.baoXiaoRenName}}</td>
            <td>所属部门：</td>
            <td>{{baoXiao.suoShuBuMen}}</td>
            <td>用途：</td>
            <td>{{baoXiao.yongTu}}</td>
          </tr>
          <tr>
            <td>支付方式：</td>
            <td>{{baoXiao.zhiFuFangShi}}</td>
            <td>日期：</td>
            <td>{{baoXiao.riQi}}</td>
            <td>情况说明：</td>
            <td>{{baoXiao.qingKuangShuoMing}}</td>
          </tr>
          <tr>
            <td>后附票据张数：</td>
            <td>{{baoXiao.houFuPiaoJuZhangShu}}</td>
            <td>报销金额(大写)：</td>
            <td>{{baoXiao.baoXiaoJinEr}}</td>
            <td>报销金额(小写)：</td>
            <td>{{baoXiao.baoXiaoJinEXiaoXie}}</td>

          </tr>
          <tr>
            <td>经办人意见：</td>
            <td>{{baoXiao.jingBanRenYiJian}}</td>
            <td>备注：</td>
            <td>{{baoXiao.beizhu}}</td>
            <td>附件：</td>
            <td>
              <el-link v-for="(item,index) in fileList" :key="index" :href="item.downLoadUrl">

                {{index+1 === fileList.length ? item.name : item.name + ','}}
              </el-link>
              <!--<a v-for="(item,index) in fileList" :key="index" :href="item.downLoadUrl" download="download">{{item.name}}</a>-->
            </td>
          </tr>
        </table>
      </div>
    </header>

    <!--    <section class="circulation-container">
          <div class="top-bar">
            <div class="top-bar-tag"></div>
            <div class="top-bar-title">签署流程</div>
          </div>
          <div class="main">
            <div class="table-container">
              <el-table :data="flowList" border stripe>
                <el-table-column label="签署人" align="center" prop="creator"></el-table-column>
                <el-table-column label="内容" align="center" prop="comments" width="400"></el-table-column>
                <el-table-column label="时间" align="center" prop="created"></el-table-column>
              </el-table>
            </div>
          </div>
        </section>
        <section class="comment-container" v-if="showSave">
          <div class="top-bar">
            <div class="top-bar-tag"></div>
            <div class="top-bar-title">您的意见</div>
          </div>
          <div class="main">
            <div class="comment-box">
              <el-input type="textarea" :rows="5" v-model="comment"></el-input>
            </div>

            <div class="btn-box" v-if="showSave">
              <el-button type="success" :loading="saveLoading" @click="submit" :disabled="isSave" v-text="btnText"></el-button>
            </div>
          </div>
        </section>-->
    <flow-approve-sign :flowList="flowList"></flow-approve-sign>
    <flow-approve-comment v-if="showSave"
                          :params="params"
    ></flow-approve-comment>
  </div>
</template>

<script>
  import FlowApproveComment from '@/views/components/FlowApproveComment'
  import FlowApproveSign from '@/views/components/FlowApproveSign'
  import baoXiaoAPI from '@/api/baoXiao/baoXiao'

  export default {
    name: 'BaoXiaoApprovalDetail',
    components: { FlowApproveComment, FlowApproveSign },
    data() {
      return {
        baoXiao:{},
        params: {
          API: baoXiaoAPI,
          url: '/baoxiao/approval-list',
          id: this.$route.params.id,
        },
        fileList:[],
        flowList:[]
      }
    },
    computed: {
      showSave() {
        return this.$route.params.flag === 'true'
      }
    },
    created() {
      this.fetchData()
      this.getFlowList()
    },
    methods: {
      getFlowList() {
        baoXiaoAPI.getFlowList(this.params.id).then(res => {
          this.flowList = res.result
        })
      },
      fetchData() {
        baoXiaoAPI.getById(this.params.id).then(res => {
          console.log(res)
          if(res.fileList && res.fileList.length !== 0){
            for(let val of res.fileList){
              this.fileList.push({
                name:val.fileName,
                downLoadUrl:val.webFilePath
              })
            }
          }
          this.baoXiao = res
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>
<style lang="scss">
</style>
<style scoped lang="scss">
  $height: 35px;
  $borderColor: 1px solid #e0e0e0;
  $boxShadow: 0 0 3px rgba(0, 0, 0, 0.1);

  .list-move {
    transition: transform 0.3s linear;
  }

  .app-container {
    font-size: 14px;
    padding: 15px 150px;
    background-color: #F4F9FD;
    min-height: calc(100vh - 86px);
    box-sizing: border-box;

    .detail-container,
    .circulation-container,
    .comment-container {
      border: $borderColor;
      margin-bottom: 20px;
      box-shadow: $boxShadow;

      .main {
        padding: 15px;
        background: white;
      }
    }
  }

  .detail-container {
    .detail-table {
      padding: 15px;
      line-height: 30px;
      background-color: white;
    }

    .detail-content {
      background-color: white;
      padding: 15px;
      line-height: 30px;
      border-top: $borderColor;
    }
  }

  .circulation-container {
    .main {
      i {
        font-size: 15px;
        cursor: pointer;
        transition: all 0.1s linear;
        color: gray;

        &:hover {
          color: #409EFF;
        }

        &.template-add {
          margin-left: 10px;
          font-size: 20px;
        }
      }

      .table-container {
        margin: 10px 0;
      }
    }
  }

  .comment-container {
    .main {
      display: flex;
      justify-content: space-between;

      .comment-box {
        width: 70%;
        margin-right: 20px;
      }

      .btn-box {
        width: 30%;
      }
    }
  }

  table tr td:nth-of-type(odd) {
    text-align: right;
    width: 10%;
    color: #606060;
    font-size: 13px;
  }

  table tr td:nth-of-type(even) {
    text-align: left;
    padding-left: 10px;
    width: 15%;
    box-sizing: border-box;
    color: #555555;
  }

  .top-bar {
    height: $height;
    line-height: $height;
    padding: 0 15px;
    background-color: #FBFBFB;
    border-bottom: $borderColor;
    display: flex;
    justify-content: space-between;

    .top-bar-tag {
      width: 5px;
      height: $height;
    }

    .top-bar-title {
      font-size: 16px;
    }

    .top-bar-section {

    }
  }


</style>
